<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
      <el-row>

        <el-col :span="24">
          <el-form-item label="菜单级联" prop="checkedArr">
            <el-cascader
              style="width: 100%"
              :options="options"
              v-model="form.checkedArr"
              placeholder="请选择..."
              clearables
              :props="{
                checkStrictly: true,
                value: 'menuId',
                label: 'menuName',
              }"
            >
            </el-cascader>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model="form.menuType">
              <el-radio v-for="item in menuTypeList" :key="item.value" :label="item.value" :value="item.value">
                {{ getMenuTypeName(item.value) }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
         <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="form.menuName" @change="getRouter()"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>    
        <el-col :span="12">
          <el-form-item label="菜单路由" prop="menuRoute">
            <el-input v-model="form.menuRoute"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路由名称" prop="routeName">
            <el-input v-model="form.routeName"></el-input>
          </el-form-item>        
        </el-col>      
      </el-row>
      <el-row>
           <el-col :span="12">
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="form.component"></el-input>
          </el-form-item>
        </el-col>
         <el-col :span="12">
          <el-form-item label="菜单接口" prop="menuApi">
              <el-input v-model="form.menuApi"></el-input>
          </el-form-item>
        </el-col>
      
      </el-row>
       <el-col :span="12">
          <el-form-item label="重定向" prop="redirect">
            <el-input v-model="form.redirect"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单图标" prop="icon">
            <template>
              <div class="icon-picker">
                <e-icon-picker
                  v-model="form.icon"
                  style="width: 100%; height: 100%"/>
              </div>
            </template>
          </el-form-item>
        </el-col>
      <el-row>     
      
      </el-row>
    </el-form>
  </div>
</template>
<script>
let pinyin = require("js-pinyin"); //中文转拼音
import { getMenu } from "../../api/menu.js";
import { menuTypeJS } from "../../api/menu.js";
import { addMenuJS } from "../../api/menu.js";
export default {
  data() {
    return {
      options: [], //绑定的级联选择器的数据
      menuTypeList: [], //菜单类型
      form: {
        checkedArr: [], //级联选择器选择的数组数据
        cascaderAllId: "", //级联选择器选择的所有Id
        parentId: "",
        menuType: "",
        menuName: "",
        menuRoute: "",
        routeName: "",    
        icon: "",
        menuApi: "",
        component: "",
        redirect: "",
        
      },
      //表单验证
      rules: {
        checkedArr:[{ required: true, message: "请选择菜单级联", trigger: "change" },],
        menuType:  [{ required: true, message: "请选择菜单类型", trigger: "blur" },],
        menuName:  [{ required: true, message: "请输入菜单名称", trigger: "blur" },],    
        routeName: [{ required: true, message: "请输入路由名称", trigger: "blur" },],  
        menuRoute: [{ required: true, message: "请输入菜单路由", trigger: "blur" },],          
        icon:      [{ required: true, message: "请选择菜单图标", trigger: "blur" }],     
        menuApi:   [{ required: true, message: "请输入菜单接口", trigger: "blur" },],
        component: [{ required: true, message: "请输入组件路径", trigger: "blur" },],
        redirect:  [{ required: true, message: "请输入重定向",   trigger: "blur" },],
      },
    };
  },
  methods: {
    //获取级联绑定数据 绑定级联下拉框
    getMenuInfo() {
      getMenu().then((res) => {
        this.options = res.data.data;
      });
    },
    //将菜单名名称转换成拼音赋值给路由名称
    getRouter() {
      this.form.routeName = pinyin.getFullChars(this.form.menuName);
    },
    //获取菜单类型[枚举]
    GetMenuTypeInfo() {
      menuTypeJS().then((res) => {
        this.menuTypeList = res.data.data;
      });
    },
    //获取菜单类型名称
    getMenuTypeName(value) {
      if (value == 1) {
        return "目录";
      } else if (value == 2) {
        return "菜单";
      } else {
        return "按钮";
      }
    },
    //菜单添加
    AddMenuInfo(formName) {
      let _this=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.cascaderAllId = this.form.checkedArr.toString();  
          this.form.parentId = this.form.checkedArr[this.form.checkedArr.length - 1];
          addMenuJS(this.form).then((res) => {
            if (res.data.result==200) {
              this.$message({ 
                  type: "success", 
                  message: res.data.message,
                  //回调关闭弹框
                  onClose:function(){ _this.$emit("onAddMenuClose") } 
              });
            } else {
              this.$message({ type: "error", message: res.data.message });
              return;
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.getMenuInfo(); //菜单级联加载
    this.getMenuTypeName(); //菜单类型加载
    this.GetMenuTypeInfo(); //菜单类型单选按钮
  },
};
</script>
<style>

</style>
